<template>
	<view>
		<!-- 轮播图 -->
		<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
		<view class="u-demo-block">
			<u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
				bgColor="#ffffff"></u-swiper>
		</view>
		<!-- #endif -->

		<!-- notice  start-->
		<view class="u-block__content">
			<view>
				<u-notice-bar :text="notice_text" color="#444"></u-notice-bar>
			</view>
		</view>
		<!-- notice end -->

		<view class="u-block__content">
			<view class="cate-block">
				<u-grid :border="false" col="5">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
						<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon> -->
						<u--image :showLoading="true" :src="listItem.src" shape="circle" width="40px" height="40px"
							@click="click"></u--image>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>

		</view>

		<view class="u-block__content" style="margin-top: 20rpx;">
			<u-row justify="space-between" customStyle="margin-bottom: 10px">
				<u-col span="6">
					<u-row>
						<u--image :showLoading="true" :src="src" shape="circle" width="16px" height="16px"
							@click="click">
						</u--image>
						<view class="new">最新资源</view>
					</u-row>
				</u-col>

				<u-col span="3">
					<view class="more">查看更多</view>
				</u-col>
			</u-row>
		</view>

		<view class="u-block__content">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in indexList" :key="index">
					<view class="cell-box">
						<view class="left-image">
							<u--image customStyle="margin: 0 5px 0 0" radius="6" :showLoading="true" :src="item.url"
								shape="square" width="150" height="90">
							</u--image>
						</view>

						<view class="right-text">
							<u--text :lines="2" text="[电视剧] 列表长度电视剧长度占用2行列表长度电视剧长度占用2行"></u--text>
							<text class="small">积分: 10</text>
							<text class="medium">2022-12-15</text>
						</view>
					</view>


				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],

				notice_text: '昨夜星辰昨夜风，画楼西畔桂堂东',
				list: [{
						name: 'photo',
						src: 'https://cdn.uviewui.com/uview/album/1.jpg',
						title: '搜索'
					},
					{
						name: 'lock',
						src: 'https://cdn.uviewui.com/uview/album/1.jpg',
						title: '热门'
					},
					{
						name: 'star',
						src: 'https://cdn.uviewui.com/uview/album/1.jpg',
						title: '星球'
					},
					{
						name: 'hourglass',
						src: 'https://cdn.uviewui.com/uview/album/1.jpg',
						title: 'VIP'
					},
					{
						name: 'home',
						src: 'https://cdn.uviewui.com/uview/album/1.jpg',
						title: '全部'
					},

				],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-block__content {
		padding: 20rpx 20rpx 0 20rpx;
	}

	.u-notice-bar {
		background-color: #fff !important;
		border-radius: 16rpx;

	}

	.u-notice__left-icon {}

	.cate-block {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx 0;
	}

	.grid-text {
		margin-top: 20rpx;
		color: #444;
		font-size: 12rpx;
	}

	.new {
		margin-left: 20rpx;
		font-size: 16rpx;
		color: #333;
		font-weight: bold;
	}

	.more {
		font-size: 12rpx;
		text-align: right;
	}

	.u-list {
		background-color: #fff !important;
		border-radius: 16rpx;
	}

	.cell-box {
		display: flex;
		padding: 16rpx;
		padding-bottom: 20rpx;
	}

	.cell-box .left-image {
		width: 300rpx;
	}

	.cell-box .right-text {
		flex: 1;
	}

	.right-text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.right-text .small {
		transform-origin: 0 50%;
		transform: scale(.8);
		color: green;
	}

	.right-text .medium {
		transform-origin: 0 50%;
		transform: scale(.9);
		color: #444;
	}
</style>
